<template>
    <div style="background-color: #F0F0F7">
        <el-row  class="top_div">
            <el-col :span="24">
                <h1>批量录入/导出订单Excel</h1>

                <el-upload
                        class="upload-demo"
                        action="/api/file/upload"
                        :on-success="upload_success"
                        :on-preview="handlePreview"
                        :on-remove="handleRemove"
                        :before-remove="beforeRemove"
                        multiple
                        :limit="3"
                        :on-exceed="handleExceed"
                        :file-list="fileList">
                    <el-button  type="primary">点击导入Excel文件</el-button>
                </el-upload>

                <el-button type="primary" icon="el-icon-edit" @click="export_excel()" style="margin-top: 25px;">导出选中订单.Excel</el-button>
            </el-col>
        </el-row>
        <el-row>
            <el-table
                    v-loading="loading"
                    :default-sort="{prop:'orid',order: 'descending'}"
                    ref="json_data"
                    :data="Orders"
                    tooltip-effect="dark"
                    style="width: 100%"
                    @selection-change="handleSelectionChange">
                <el-table-column
                        type="selection"
                        width="55">
                </el-table-column>
                <el-table-column
                        prop="orid"
                        label="订单编号"
                        width="100">
                </el-table-column>
                <el-table-column
                        label="订单创建日期"
                        width="180">
                    <template slot-scope="scope">{{ scope.row.createTime }}</template>
                </el-table-column>
                <el-table-column
                        prop="bnum"
                        label="乘坐车辆"
                        width="120">
                    <template slot-scope="scope">
                        <el-popover trigger="hover" placement="top">
                            <p>司机: {{ scope.row.bus.driver.ename }}</p>
                            <p>车型: {{ scope.row.bus.bmodel }}</p>
                            <p>电话: {{ scope.row.bus.driver.ephone }}</p>
                            <div slot="reference" class="name-wrapper">
                                <el-tag size="medium">{{ scope.row.bus.bnum }}</el-tag>
                            </div>
                        </el-popover>
                    </template>
                </el-table-column>
                <el-table-column
                        prop="client.clname"
                        label="乘客姓名"
                        width="120">
                    <template slot-scope="scope">
                        <el-popover trigger="hover" placement="top" v-if="scope.row.client!=null">
                            <p>姓名: {{ scope.row.client.clname }}</p>
                            <p>身份证号: {{ scope.row.client.clidcard }}</p>
                            <p>电话: {{ scope.row.client.clphone }}</p>
                            <div slot="reference" class="name-wrapper">
                                <el-tag size="medium">{{ scope.row.client.clname }}</el-tag>
                            </div>
                        </el-popover>
                        <el-popover trigger="hover" placement="top" v-if="scope.row.client==null">
                            <p>会员信息已删除</p>
                            <div slot="reference" class="name-wrapper">
                                <el-tag size="medium" type="info">已删除</el-tag>
                            </div>
                        </el-popover>
                    </template>
                </el-table-column>
                <el-table-column
                        prop="origin"
                        label="出发地点"
                        width="130">
                </el-table-column>
                <el-table-column
                        prop="destination"
                        label="目的地"
                        width="130">
                </el-table-column>
                <el-table-column
                        prop="beginTime"
                        label="出发时间"
                        sortable
                        width="180">
                    <template slot-scope="scope">
                        <el-popover trigger="hover" placement="top">
                            <p>预计行程时间: {{ scope.row.expectTime}} 小时</p>
                            <div slot="reference" class="name-wrapper">
                                <el-tag size="medium">{{ scope.row.beginTime }}</el-tag>
                            </div>
                        </el-popover>
                    </template>
                </el-table-column>
                <el-table-column
                        prop="seller.sellerName"
                        label="售票员"
                        width="100">
                    <template slot-scope="scope">
                        <el-popover trigger="hover" placement="top">
                            <p>姓名: {{ scope.row.seller.ename }}</p>
                            <p>住址: {{ scope.row.seller.eaddress }}</p>
                            <p>电话: {{ scope.row.seller.ephone }}</p>
                            <div slot="reference" class="name-wrapper">
                                <el-tag size="medium">{{ scope.row.seller.ename }}</el-tag>
                            </div>
                        </el-popover>
                    </template>
                </el-table-column>
                <el-table-column
                        prop="costStatus"
                        label="缴费">
                    <template slot-scope="scope">
                        <el-popover trigger="hover" placement="top">
                            <p>费用: {{ scope.row.cost }}元</p>
                            <div slot="reference" class="name-wrapper">
                                <el-tag size="medium" type="info" v-if="scope.row.costStatus==0">未支付</el-tag>
                                <el-tag size="medium" type="success" v-if="scope.row.costStatus==1">已支付</el-tag>
                                <el-tag size="medium" type="primary" v-if="scope.row.costStatus==2">派车中</el-tag>
                                <el-tag size="medium" type="primary" v-if="scope.row.costStatus==3">进行中</el-tag>
                                <el-tag size="medium" type="success" v-if="scope.row.costStatus==4">订单完成</el-tag>
                            </div>
                        </el-popover>
                    </template>
                </el-table-column>
            </el-table>
        </el-row>
        <el-row style="text-align: center;background-color: white;padding: 5px;">
            <el-pagination
                    background
                    layout="prev, pager, next"
                    :current-page="currentPage"
                    :page-size="pageSize"
                    :total="total"
                    :page-count="pageTotal"
                    @current-change=page>
            </el-pagination>
        </el-row>
    </div>

</template>

<script>
    export default {
        inject:['reload'],
        name: "OrderExcel",
        data(){
            return{
                dialogImageUrl: '',
                dialogVisible: false,
                disabled: false,
                fileList: [],
                Orders: [],
                loading:false,

                //绑定复选框选中的数据
                json_data: [],

                //分页条绑定的pageInfo信息
                pageSize:5,
                currentPage:1,
                pageTotal:0,
                total:0,
            }
        },
        methods: {
            /*Excel导入成功！*/
            upload_success(file, fileList){
                const h = this.$createElement;
                this.$notify({
                    type: 'success',
                    title: '导入成功',
                    message: h('p', null, [
                        h('i', { style: 'color: teal' }, file),
                        h('span', null, ' 成功导入！'),
                    ])
                });
                //异步刷新
                this.reload();
            },
            handleRemove(file, fileList) {
                console.log(file, fileList);
            },
            handlePreview(file) {
                console.log(file);
            },
            handleExceed(files, fileList) {
                this.$message.warning(`当前限制选择 3 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`);
            },
            beforeRemove(file, fileList) {
                return this.$confirm(`确定移除 ${ file.name }？`);
            },



            //选中订单
            handleSelectionChange(val) {
                this.json_data = val;
            },
            //导出选中Excel
            export_excel(){
                const h = this.$createElement;
                if (this.json_data.length==0){
                    //如果没有选中任何数据
                    this.$notify({
                        type: 'error',
                        title: '导出失败',
                        message: h('i', { style: 'color: red'}, "您还没有选中任何订单数据")
                    });
                    return "sda";
                }
                let params=new URLSearchParams();
                //处理封装orderData对象
                let  orderDatas=[];
                for (let i = 0; i < this.json_data.length; i++) {
                    let order_data=this.json_data[i];
                    let orderData={};
                    let costStatus="";
                    switch (order_data.costStatus) {
                        case 0:costStatus="未支付";break;
                        case -1:costStatus="乘客取消";break;
                        case -2:costStatus="管理员取消";break;
                        case -3:costStatus="系统取消";break;
                        case -4:costStatus="失败";break;
                        case 1:costStatus="已支付";break;
                        case 2:costStatus="派车中";break;
                        case 3:costStatus="进行中";break;
                        case 4:costStatus="订单完成";break;
                    }
                    if(order_data.client==null){
                        orderData={origin:order_data.origin,destination:order_data.destination,beginTime:order_data.beginTime,endTime:order_data.endTime,node:"暂时没有备注",clname:"已删除",clphone:"已删除",clidCard:"已删除",sname:order_data.seller.ename,cost:order_data.cost,costStatus:costStatus,createTime:order_data.createTime};
                    }else {
                        orderData={origin:order_data.origin,destination:order_data.destination,beginTime:order_data.beginTime,endTime:order_data.endTime,node:"暂时没有备注",clname:order_data.client.clname,clphone:order_data.client.clphone,clidCard:order_data.client.clidcard,sname:order_data.seller.ename,cost:order_data.cost,costStatus:costStatus,createTime:order_data.createTime};
                    }
                    orderDatas[i]=orderData;
                }
                params.append("orderDatas",JSON.stringify(orderDatas));
                let _this=this;
                this.axios.post("/file/download",params)
                    .then(res=>{
                        this.$notify({
                            type: 'success',
                            title: '导出成功',
                            message: h('p', null, [
                                h('i', { style: 'color: red' }, 'Go+订单.xlsx'),
                                h('span', null, ' 成功导出到'),
                                h('i', { style: 'color: teal' }, res.data)
                            ])
                        });
                    }).catch(function(error) {
                        _this.$notify({
                            type: 'error',
                            title: '下载失败',
                            message: h('i', { style: 'color: red'}, "请检查文件是不是已经存在或打开")
                        });
                    });
            },
            //分页
            page(currentPage){
                let _this=this;
                _this.loading=true;
                _this.axios.get("/order/queryAllByPageHelper?pageSize=10&currentPage="+currentPage).then(res=>{
                    _this.currentPage=res.data.pageNum;
                    _this.pageTotal=res.data.pages;
                    _this.total=res.data.total;
                    _this.pageSize=res.data.pageSize;
                    let orders=[];
                    for (let i = 0; i < res.data.list.length; i++) {
                        let list=res.data.list[i];
                        orders[i]={
                            orid: list.orid,
                            bus:list.bus,
                            origin: list.origin,
                            destination: list.destination,
                            beginTime: list.beginTime,
                            endTime: list.endTime,
                            expectTime: Math.ceil((new Date(list.endTime)-new Date(list.beginTime))/3600000),
                            client: list.client,
                            seller: list.seller,
                            createTime: list.createTime,
                            cost: list.cost,
                            costStatus: list.costStatus
                        };
                    }
                    this.Orders=orders;
                    _this.loading=false;
                });
            }
        },
        created(){
            this.page(1);
        }
    }
</script>

<style scoped>
    .top_div{
        box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
        padding: 40px;
        text-align: center;
        margin-top: 10px;
        margin-bottom: 30px;
        background-color: white;
    }
</style>
